<template>
  <div ref="roleEdit">
    <!-- <Modal
      v-model="role.roleEditModalSta"
      title="编辑用户"
      :loading="loading"
      @on-ok="roleEditOk"
      @on-cancel="roleEditCancel"
    >
      <Row>
        <XCol :span="20">
          <Form
            ref="roleEditForm"
            :model="role.roleOneSta"
            :rules="roleEditRule"
            label-position="right"
            :label-width="100"
          >
            <FormItem label="用户ID" prop="id">
              <XInput v-model="role.roleOneSta.id" disabled></XInput>
            </FormItem>
            <FormItem label="角色名称" prop="name">
              <XInput v-model="role.roleOneSta.name"></XInput>
            </FormItem>
          </Form>
        </XCol>
      </Row>
    </Modal> -->
  </div>
</template>
<script>
// import { Modal, Row, Col, Form, FormItem, Input } from "iview";
import { mapState, mapMutations } from "vuex";
export default {
  name: "RoleEdit",
  data() {
    return {
      loading: true,
      //表单验证规则
      roleEditRule: {
        id: {
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        },
        name: {
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        }
      }
    };
  },
  created() {},
  mounted() {},
  computed: {
    ...mapState({
      role: state => state.role //vuex角色
    })
  },
  methods: {
    ...mapMutations([
      "roleEditModalMut", //编辑角色模态框
      "roleListUpdateOneMut", //更新角色列表数据
      "roleOneMut" //清空当前选中的角色
    ]),
    //提交
    roleEditOk() {
      let _self = this;
      this.$refs["roleEditForm"].validate(valid => {
        if (valid) {
          setTimeout(() => {
            let obj = this.$qs.stringify({
              id: this.role.roleOneSta.id,
              name: this.role.roleOneSta.name,
              crtime: this.role.roleOneSta.crtime,
              chtime: new Date()
            });
            //根据用户id获取用户角色
            this.$axios.post("/acl_role/updateRole", obj).then(res => {
              if (res.data) {
                _self.roleListUpdateOneMut({
                  state: res.data
                }); //更新角色列表数据
                _self.roleOneMut({
                  state: {}
                }); //清空当前选中的角色
                _self.roleEditModalMut({
                  state: false
                }); //关闭模态框
              }
            });
          }, 1000);
        } else {
          //动画
          this.loading = false;
          this.$nextTick(() => {
            this.loading = true;
          });
        }
      });
    },
    //取消
    roleEditCancel() {
      this.roleOneMut({
        state: {}
      }); //清空当前选中的角色
    }
  },
  components: {
    // Modal,
    // Row,
    // XCol: Col,
    // Form,
    // FormItem,
    // XInput: Input
  }
};
</script>
